<template>
  <div>
    <div class="listTop">
      <div>
        <span class="tit">节目列表</span>
        <span class="musicNum">{{ musiclistObj.count }}首歌</span>
      </div>
    </div>
    <table class="musicTable">
      <tbody>
        <tr v-for="item in musiclistObj.programs" :key="item.id">
          <td>
            <p class="SerialNumber">
              {{ item.serialNum }} <span @click="PlayClick(item)"></span>
            </p>
          </td>
          <td>
            <router-link
              tag="p"
              :to="{ name: 'program', query: { id: item.id } }"
              class="musciItemColor"
            >
              {{ item.name }}
            </router-link>
          </td>
          <td class="operationHover">
            <p class="musicTime">
              <span>播放{{ item.listenerCount }}</span>
              <span>赞{{ item.likedCount }}</span>
            </p>
            <div class="operationBox">
              <span class="play" @click="pushMusicAction(item)"></span>
              <span class="forward"></span>
              <span class="download"></span>
            </div>
          </td>
          <td>
            <p class="musciItemColor">
              {{ item.createTime | fmtDate("yyyy-MM-DD") }}
            </p>
          </td>
          <td>
            <p class="musciItemColor">{{ item.duration | formatDuring }}</p>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="musiclistObj.count"
        :page-size="limit"
        :current-page="parseInt($route.query.page)"
        :hide-on-single-page="true"
        @current-change="pageNumChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { radioStationDetailmp3 } from "@/api";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      musiclistObj: {},
      limit: 30,
    };
  },
  filters: {
    formatDuring(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = parseInt((mss % (1000 * 60)) / 1000);
      return minutes + ":" + seconds;
    },
  },
  created() {
    this.getmusicList();
  },
  methods: {
    ...mapActions("musicStore", ["unshiftRadioStation", "pushMusicAction"]),
    getmusicList() {
      radioStationDetailmp3({
        rid: this.$route.query.id,
        limit: this.limit,
        offset: ((this.$route.query.page || 1) - 1) * this.limit,
      }).then((res) => {
        this.musiclistObj = res;
        console.log(res);
      });
    },
    pageNumChange(num) {
      this.$router.push({
        name: "radiostationdetail",
        query: { id: this.$route.query.id, page: num },
      });
    },
    async PlayClick(item) {
      //直接点击播放当前音乐
      await this.unshiftRadioStation({ data: item, that: this });
    },
  },
};
</script>

<style lang="scss" scoped>
.listTop {
  display: flex;
  margin-top: 27px;
  justify-content: space-between;
  border-bottom: 2px solid #c20c0c;
  .tit {
    font-size: 20px;
    line-height: 28px;
  }
  .musicNum {
    margin: 9px 0 0 20px;
    color: #666;
    font-size: 12px;
  }
}
.musicTable {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  tbody {
    tr {
      td {
        padding: 10px 0;
        p {
          padding: 6px 10px;
          line-height: 18px;
          text-align: left;
          font-size: 12px;
          color: #666;
          font-weight: normal;
        }
        .musciItemColor {
          color: #333;
          cursor: pointer;
        }
        .SerialNumber {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            width: 17px;
            height: 17px;
            display: inline-block;
            cursor: pointer;
            background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -103px;
          }
        }
        .operationBox {
          display: none;
          span {
            display: inline-block;
            width: 18px;
            height: 16px;
            vertical-align: middle;
            margin-left: 5px;
          }
          .play {
            width: 13px;
            height: 13px;
            background: url("./../../assets/imges/btnIconTwo.png") no-repeat 0 -700px;
          }
          .Collection {
            background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -174px;
          }
          .forward {
            background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -195px;
          }
          .download {
            background: url("./../../assets/imges/iconTwo.png") no-repeat -81px -174px;
          }
        }
        &.operationHover:hover {
          .musicTime {
            display: none;
          }
          .operationBox {
            display: block;
          }
        }
      }
      &:nth-of-type(odd) {
        background-color: #f7f7f7;
      }
    }
  }
}
</style>